<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px auto;
            width: 500px;
        }

        .box>input {
            height: 30px;
            text-indent: 15px;
            border: 1px solid #8bc58b;
            /* 外边框 轮廓 */
            outline: none;
        }

        .box>span {
            /* 默认不显示 */
            display: none;
            /* 垂直方向对齐方式 */
            vertical-align: middle;
            width: 200px;
            line-height: 30px;
            text-indent: 14px;

        }

        .box>span.wrong {
            display: inline-block;
            border: 1px solid#f9b098;
            color: #ff2f66;
            background: #ffdcd0 url(./wrong.png) no-repeat left;

        }

        .box>span.right {
            display: inline-block;
            border: 1px solid#c9ddc9;
            color: #189189;
            background: #dfffdf url(./right.png) no-repeat left;

        }
    </style>
    <script>
        window.onload = function () {
            var ipt = document.querySelector('input')
            var spn = document.querySelector('span')
            // input 失去焦点事件
            ipt.onblur = function () {
                // input 的value属性 可以获取到，输入框里面的值
                // 在这里this 指向的是 事件的调用者(一般情况)
                var val = this.value
                if (val === '') {
                    spn.innerText = '分数不能为空'
                    spn.className = "wrong"
                    return
                }
                // isNaN(参数) 作用：判断参数是 不是一个数 如果，不是number ，返回true，是number返回false
                if (isNaN(val)) {
                    spn.innerText = '请输入数字'
                    spn.className = "wrong"
                    return
                }
                // 只要是从input框里面获取的值，都是string类型需要转换成number类型
                if (Number(val) > 150 || Number(val) < 0) {
                    spn.innerText = '成绩范围0-150'
                    spn.className = "wrong"
                    return
                }
                spn.innerText = '正确'
                spn.className = "right"
            }

        }
    </script>
</head>

<body>
    <div class="box">
        <label for="score">高数：</label>
        <input type="text" id="score" placeholder="请输入高数成绩">
        <span></span>
    </div>
</body>

</html>